<template>
  <div class="main">
    <div class="main-contain">
      <div class="home-wrapper">
        <div class="home-header"><span>你好！</span>欢迎来到好茶仓后台管理系统平台！</div>
        <div class="servers">
          <div class="servers-title">服务器信息</div>
          <div class="list">
            <p><span>操作系统</span><label>Centos 6.2</label></p>
            <p><span>当前时间</span><label>{{time}}</label></p>
          </div>
        </div>
        <div class="servers">
          <div class="servers-title">网站信息</div>
          <div class="list">
            <p><span>版权所有</span><label>深圳市好茶仓网络科技有限公司</label></p>
            <p style="border-bottom: 1px solid #d9d9d9;"><span>访问域名</span><label>http://wms.teayk.com</label></p>
            <p><span>当前版本</span><label>V1.1.0</label></p>
          </div>
        </div>
        <div class="servers">
          <div class="servers-title">公司信息</div>
          <div class="list">
            <p><span>公司名称</span><label>深圳市好茶仓网络科技有限公司</label></p>
            <p style="border-bottom: 1px solid #d9d9d9;"><span>公司官网</span><label><a href="http://www.haochacang.cn" target='_blank'>http://www.haochacang.cn</a></label></p>
            <p><span>客服电话</span><label>18682219287</label></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date.js'
export default {
  data () {
    return {
      time: ''
    }
  },
  mounted () {
    this.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
  }
}
</script>

<style lang="scss" scoped>
  .home-wrapper{
    font-size: 16px;
    padding: 12px 0 0 6px;
    background: transparent;
    width: 90%;
    .home-header{
      padding-left: 22px;
      background: url(../../assets/images/admin.png) no-repeat left center;
      margin-bottom: 20px;
      span{
        color: #44916c;
        font-weight: bold;
      }
    }
    .message{
      margin: 26px 0 15px 0;
      .message-title{
        height: 32px;
        line-height: 32px;
        border-bottom: 2px solid #44916c;
        color: #ffffff;
        padding-left: 15px;
        background: url(../../assets/images/homebg.png) no-repeat left center;
      }
      .message-order{
        font-size: 14px;
        margin: 15px 0 20px 0;
        color: #333333;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        padding: 13px 0;
        p{
          padding: 5px 0 5px 28px;
          background: url(../../assets/images/message.png) no-repeat 8px center;
        }
      }
    }
    .servers{
      background: #ffffff;
      border: 1px solid #e6e6e6;
      padding-bottom: 20px;
      margin-bottom: 20px;
      .servers-title{
        color: #4d4d4d;
        font-weight: bold;
        padding: 10px 0 15px 20px;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 6px;
          height: 30px;
          background: linear-gradient(top,#44916c,#84c225)!important;
          background: -webkit-gradient(linear, left top, left bottom, from(#44916c), to(#84c225)) !important;
        }
      }
      .list{
        border:1px solid #d9d9d9;
        margin:0 15px;
        font-size: 14px;
        p{
          height: 32px;
          line-height: 32px;
        }
        p:first-child{
          border-bottom: 1px solid #d9d9d9;
        }
        span{
          border-right: 1px solid #d9d9d9;
          width: 152px;
          text-align: center;
          display: inline-block;
        }
        label{
          padding-left: 34px
        }
      }
    }
  }
</style>
